<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝首页-李婷妍</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <!-- nav开始 -->
    <nav class="container">
        <div class="row" style="width: 1190px;margin: 0 auto;">
            <div class="col-md-4 nav navbar-left nav1">
                <ul>
                    <li><a href="">中国大陆</a></li>
                    <li>
                        <a href="#" class="active">亲，请登录</a>
                        <a href="#">免费注册</a>
                    </li>
                    <li>
                        <a href="">手机逛淘宝</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-8 nav navbar-right nav2">
                <ul>
                    <li><a href="">我的淘宝</a></li>
                    <li><a href="">购物车</a></li>
                    <li><a href="">商品分类</a></li>
                    <li><a href="">免费开店</a></li>
                    <li><span>|</span></li>
                    <li><a href="">千牛卖家中心</a></li>
                    <li><a href="">联系客服</a></li>
                    <li><a href="">网站导航</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- nav结束 -->
    <main class="container">
        <!-- 搜索框开始 -->
        <div class="search container">
            <div class="row">
                <div class="col-md-2 search1 text-center">LOGO</div>
                <div class="col-md-8 searchBox container">
                    <div class="row ThesearchBox">
                        <div class="s1 col-md-1 text-center"><a href="">宝贝</a></div>
                        <div class="s2 col-md-8">
                            <input type="text" placeholder="请搜索" class="form-control">
                        </div>
                        <div class="s3 col-md-3 text-right">
                            <span><img src="./images/拍照.png" alt=""></span>
                            <button>搜索</button>
                        </div>
                    </div>
                    <div class="row clearfix links">
                        <a href="">新款连衣裙</a>
                        <a href="">四件套</a>
                        <a href="">潮流T恤</a>
                        <a href="">时尚女鞋</a>
                        <a href="">短裤</a>
                        <a href="">半身裙</a>
                        <a href="">男士外套</a>
                        <a href="">墙纸</a>
                        <a href="">行车记录仪</a>
                        <a href="">新款男鞋</a>
                        <a href="">耳机</a>
                        <a href="">时尚女鞋</a>
                    </div>
                </div>
                <div class="col-md-2 search3">
                    <h5>去领红包</h5>
                    <img src="./images/下载.png" alt="" style="width: 62px;">
                </div>
            </div>
        </div>
        <!-- 搜索框结束 -->
        <div class="body container">
            <div class="row bodyTitle">
                <div class="col-md-2">
                    主题市场
                </div>
                <div class="col-md-10">
                    <ul class="bodyTitle-1">
                        <li><a href="" style="color: #FF0036;">天猫</a></li>
                        <li><a href="" style="color: #FF0036;">聚划算</a></li>
                        <li><a href="" style="color: #33c900;">天猫超市</a></li>
                    </ul>
                    <ul class="bodyTitle-2">
                        <li>|</li>
                        <li><a href="">司法拍卖</a></li>
                        <li><a href="">飞猪旅行</a></li>
                        <li><a href="">天天特卖</a></li>
                        <li><a href="">淘小铺</a></li>
                    </ul>
                </div>
            </div>
            <div class="row body-main">
                <div class="col-md-2 body-main1">
                    <ul>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                        <li><a href="">女装</a><span>/</span><a href="">内衣</a><span>/</span><a href="">家具</a></li>
                    </ul>
                </div>
                <div class="col-md-6 body-main2">
                    <div class="row">
                        <div class="banner">
                            <img src="./images/banner.jpg" alt="">
                            <ul>
                                <li class="active"></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row clearfix" style="width: 520px;">
                        <div class="row">
                            <div class="col-md-6">
                                <h5>
                                    <font style="color:#FF0036;font-size: 16px;margin-right: 10px;">TMALL天猫</font>理想生活上天猫
                                </h5>
                            </div>
                            <div class="col-md-6 text-right pages">
                                <span>3</span>/5
                            </div>
                        </div>
                        <div class="blocks">
                            <ul>
                                <li><img src="./images/tm1.jpg" alt=""></li>
                                <li><img src="./images/tm2.jpg" alt=""></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="body-main3 col-md-3">
                    <div class="my1 row">
                        <div class="my1-1 text-center">
                            <font><img src="./images/touxiang.jpg" style="border-radius: 50%;" alt=""></font>
                            <h4>Hi!你好</h4>
                            <ul class="row" style="width: 240px;margin: 0 auto;">
                                <li class="col-md-6"><a href="" style="color: orangered;">领淘金币抵钱</a></li>
                                <li class="col-md-6"><a href="" style="color: orangered;">会员俱乐部</a></li>
                            </ul>
                            <div class="my1-1-btnG row">
                                <div class="form-group">
                                    <button class="btn col-md-4">登录</button>
                                    <button class="btn col-md-4">注册</button>
                                    <button class="btn col-md-4">开店</button>
                                </div>
                            </div>
                            <div class="row">
                                <img src="./images/share.jpg" alt="" width="290px">
                            </div>
                        </div>
                    </div>
                    <div class="my2 row clearfix">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#name1" data-toggle="tab">公告</a></li>
                            <li><a href="#name2" data-toggle="tab">规则</a></li>
                            <li><a href="#name3" data-toggle="tab">安全</a></li>
                            <li><a href="#name4" data-toggle="tab">公益</a></li>
                            <li><a href="#name5" data-toggle="tab">千牛</a></li>
                        </ul>
                        <!-- 选项卡的面板 -->
                        <div class="tab-content">
                            <div class="tab-pane fade in active" id="name1">
                                <a>严禁借庆祝建党100周年进行商业营销的公告</a>
                            </div>
                            <div class="tab-pane fade" id="name2">
                                <a>新增《淘宝网汽配行业《淘宝网区域零售服务</a>
                            </div>
                            <div class="tab-pane fade" id="name3">
                                <a href="">魔豆妈妈公益项目</a>
                                <a href="">让母爱永不打烊！</a>
                            </div>
                            <div class="tab-pane fade" id="name4">
                                <a href="">阿里公益“奥斯卡”</a>
                                <a href="">阿里公益论坛</a>
                            </div>
                            <div class="tab-pane fade" id="name5">
                                <a href="">千牛头条</a>
                                <a href="">新手开店</a>
                            </div>
                        </div>
                    </div>
                    <div class="row clearfix my3">
                        <div class="row">
                            <a href="" class="col-md-3" style="border-left: 0px;">充话费</a>
                            <a href="" class="col-md-3">旅行</a>
                            <a href="" class="col-md-3">车险</a>
                            <a href="" class="col-md-3" style="border-right: 0px;">游戏</a>
                        </div>
                        <div class="row">
                            <a href="" class="col-md-3" style="border-left: 0px;">彩票</a>
                            <a href="" class="col-md-3">电影</a>
                            <a href="" class="col-md-3">酒店</a>
                            <a href="" class="col-md-3" style="border-right: 0px;">理财</a>
                        </div>
                    </div>
                    <div class="row clearfix my4">
                        <div class="contanier">
                            <div class="row ali">
                                <div class="col-md-6">
                                    <h5>阿里APP</h5>
                                </div>
                                <div class="col-md-6 text-right">
                                    <span>更多></span>
                                </div>
                            </div>
                            <div class="row icons">
                                <ul>
                                    <li><img src="./images/微信截图_20210628192209.png" alt=""></li>
                                    <li><img src="./images/微信截图_20210628192209.png" alt=""></li>
                                    <li><img src="./images/微信截图_20210628192209.png" alt=""></li>
                                    <li><img src="./images/微信截图_20210628192209.png" alt=""></li>
                                    <li><img src="./images/微信截图_20210628192209.png" alt=""></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="good container">
            <div class="row">
                <h5>有好货<img src="./images/g.png" alt="" style="margin-left: 10px;"></h5>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <a href=""><img src="./images/g1.jpg" alt="">
                        <p>Pure Cashmere 保暖针织帽</p>
                        <p>这款针织帽风格休闲可爱，帽口</p>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href=""><img src="./images/g2.jpg" alt="">
                        <p>Pure Cashmere 保暖针织帽</p>
                        <p>这款针织帽风格休闲可爱，帽口</p>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href=""><img src="./images/g3.jpg" alt="">
                        <p>Pure Cashmere 保暖针织帽</p>
                        <p>这款针织帽风格休闲可爱，帽口</p>
                    </a>
                </div>
                <div class="col-md-3">
                    <a href=""><img src="./images/g5.jpg" alt="">
                        <p>Pure Cashmere 保暖针织帽</p>
                        <p>这款针织帽风格休闲可爱，帽口</p>
                    </a>
                </div>
            </div>
        </div>
    </main>
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/bootstrap.min.js"></script>

</html>